<!-- 标题栏 -->
<template>
  <div class="title-bar">
    <slot name="left">
      <div class="title-bar-left">
        <slot name="title">
          <h4>{{ title }}</h4>
        </slot>
        <slot name="icon">
          <i v-if="icon" class="iconfont" :class="icon"></i>
        </slot>
      </div>
    </slot>
    <div class="title-bar-center">
      <slot name="center"></slot>
    </div>
    <div class="title-bar-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  export interface TitleBarProps {
    // 标题
    title?: string
    // 快捷键
    icon?: string
  }
  withDefaults(defineProps<TitleBarProps>(), {
    title: '标题',
    icon: ''
  })
</script>

<style lang="less" scoped>
  .title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    width: 100%;
    height: 100%;
    height: 56px;

    .title-bar-left {
      display: flex;
      align-items: center;
      gap: 0 4px;

      h4 {
        font-size: 14px;
        white-space: nowrap;
        color: @text02;
        font-weight: 700;
      }
    }

    .title-bar-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .title-bar-right {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
